<template>
    <div tabindex="0" class="et-input mb-[2px]!" :class="{
        'ntopabuttom': !label && !required
    }">
        <v-select label="Select" tabindex="0" v-bind="$attrs" :rounded="false"
            class="focus:border-solid! focus:border-[#4d90fe]! focus:border-1!"
            :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']">
            <template #label>
                <span class="flex items-center font-avenir! text-[#333]">
                    <i class="iconfont icon-required text-[red] text-2 mr-[1px]" v-if="required"></i> {{ label }}
                </span>
            </template>
            <template v-slot:item="{ props, item }">
                <v-list-item v-bind="props" :subtitle="item.raw.department" :style="{
                    height: '10px!important'
                }"></v-list-item>
            </template>
        </v-select>
    </div>
</template>


<script setup lang="ts">
import type { InputProps } from './interface';

defineProps<InputProps>()
</script>
<style lang="scss" scoped>
@use "./style.scss" as *;

.ntopabuttom {
    :deep(.v-field__input) {
        padding-top: calc(var(--v-field-input-padding-top) - 8px) !important;
    }
}
</style>